<template>
  <div class="home">
      <div class="home_isShow">
            <div class="home_top">
        <div class="home_top_wrapper">
          <div>Sort by : </div>
          <div>Default</div>
          <div style="width:20%" @click="onClickShen" v-show="isShowShen">Price↓</div>
          <div style="width:20%" @click="onClickJian" v-show="isShowJian">Price↑</div>
        </div>
      </div>
     
         <div class="home_container">
          <div class="home_content_left">
              <div>P R I C E</div>
              <div @click="onClickAll"> ALL</div>
              <div @click="onClickZero"> 0.00 - 100.00</div>
              <div @click="onClickOh"> 100.00 - 500.00</div>
              <div @click="onClickWu"> 500.00 - 1000.00</div>
              <div @click="onClickYq"> 1000.00 - 2000.00</div>
          </div>
        
          <div class="home_content_right"
          @scroll="onScroll">
             <el-row class="home_container_row">
          <el-col  :md="24" :lg="24" class="home_content_wrapper_col">
              <div v-for="(item,index) in data" :key="index" class="home_content_right_wrapper">
                  <div class="home_content_right_wrapper_img">
                    <img :src="item.productImage"/>
                  </div>
                  <div class="home_content_right_name"><h3>{{item.productName}}</h3></div>
                  <div class="home_content_right_price">{{item.salePrice | Price}}</div>
                  <div class="home_content_right_button">
                    <button @click="onClickJiaMall(item)">加入购物车</button>
                  </div>
              </div>
                              </el-col>
      </el-row>
          </div>

      </div>

     
      <div class="loading" v-show="isShowLoading">
        <img src="../../public/loading.gif" alt="">
      </div>
      </div>
      <div class="home_isShow_to">
        <div class="home_top_wrapper">
          <div>Sort by : </div>
          <div>Default</div>
          <div style="width:20%" @click="onClickShen" v-show="isShowShen">Price↓</div>
          <div style="width:20%" @click="onClickJian" v-show="isShowJian">Price↑</div>
        </div>
        <div v-for="(item,index) in data" :key="index" class="home_to_container">
            <div class="homt_to_img">
              <img :src="item.productImage" alt="">
            </div>
            <div style="width:65%">
              <div>{{item.productName}}</div>
              <div>{{item.salePrice | Price}}</div>
            </div>
             <div>
                    <button @click="onClickJiaMall(item)">加入购物车</button>
              </div>
        </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'Home',
  data(){
    return{
      data:[],
      list:[],
      isShowShen:true,
      isShowJian:false,
      isShowLoading:false,
      ii:1
    }
  },
  components: {
    
  },
  mounted(){
    axios.get("http://localhost:8080/data.json").then(res=>{
      this.data = res.data.result.list;
      this.data1 = res.data.result.list;
    })
  },
  filters:{
    Price(val){
      return '￥' + val;
    }
  },
  methods:{
    onClickShen(){
      this.data.sort((a,b)=>{
          return b.salePrice - a.salePrice;
      })
      this.data1.sort((a,b)=>{
          return b.salePrice - a.salePrice;
      })
      this.isShowShen = false;
      this.isShowJian = true;
    },
    onClickJian(){
      this.data.sort((a,b)=>{
        return a.salePrice - b.salePrice;
      })
      this.data1.sort((a,b)=>{
        return a.salePrice - b.salePrice;
      })
      this.isShowShen = true;
      this.isShowJian = false;
    },
    onScroll(event){
      // console.log(event);
      // 视口宽度
      // offsetHeight
      // clientHeight
      let scrollHeight = event.target.scrollHeight;
      let scrollTop = event.target.scrollTop;
      let clientHeight = event.target.clientHeight;
      // console.log(event.target.scrollHeight);
      // console.log(event.target.offsetHeight + event.target.clientHeight);
      if(scrollHeight - scrollTop - clientHeight == 0){
        // console.log(123);
        
    
        if(this.ii <= 1){
            this.isShowLoading = true;
        setTimeout(()=>{
          axios.get("http://localhost:8080/data2.json").then(res=>{
            let Res = res.data.result.list;
            Res.forEach(item=>{
              this.data.push(item);
              this.data1.push(item)
            })
            console.log(this.data);
          })
          this.isShowLoading = false;
        },2000)
        }
        this.ii++;
      }   
    },
    onClickZero(){
      this.data=[];
      this.data1.forEach(item=>{
        if(item.salePrice >= 0 && item.salePrice <=100){
          // console.log(item);
          this.data.push(item)
          console.log(this.data);
        }
      })
      // this.data = this.list
    },
    onClickAll(){
      this.data = this.data1;
    },
    onClickOh(){
      this.data = [];
      this.data1.forEach(item=>{
        if(item.salePrice >= 100 && item.salePrice <=500){
          // console.log(item);
          this.data.push(item)
          console.log(this.data);
        }
      })
    },
    onClickWu(){
      this.data = [];
      this.data1.forEach(item=>{
        if(item.salePrice >= 500 && item.salePrice <=1000){
          // console.log(item);
          this.data.push(item)
          console.log(this.data);
        }
      })
    },
    onClickYq(){
      this.data = [];
      this.data1.forEach(item=>{
        if(item.salePrice >= 1000 && item.salePrice <=2000){
          // console.log(item);
          this.data.push(item)
          console.log(this.data);
        }
      })
    },
    onClickJiaMall(item){
      // console.log(item);
      var Token = localStorage.getItem('token');
      console.log(Token);
      if(Token == null){
          this.$message.error("未登录!跳转登录页!")
          this.$router.push("/login");
      }else{
        this.$router.push("/mall");
        this.$store.commit("UpData",item)
      }
    }
    
  }
}
</script>

<style>
  .home_top
  {
    width: 100%;
    height: 8vh;
    background: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .home_top_wrapper
  {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .home_container
  {
    width: 100%;
    height: 92vh;
    background: rgb(233, 233, 233);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home_content_left
  {
    width: 20%;
    height: 100%;
  }
  .home_content_left div
  {
    width: 100%;
    height: 8%;
    font-size: 1.5rem;
  }
  .home_content_right
  {
    width: 80%;
    height: 100%;
    overflow: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .home_content_right_wrapper
  {
    width: 22%;
    height: 28rem;
    border: 1px solid black;
    margin: 1rem;
  }
  .home_content_right_wrapper_img
  {
    width: 100%;
    height: 70%;
  }
  .home_content_right_wrapper_img img
  {
    width: 100%;
    height: 100%;
  }
  .home_content_right_name
  {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .home_content_right_price
  {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: red;
  }
  .home_content_right_button
  {
    width: 100%;
    height: 14%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home_content_right_button button
  {
    width: 90%;
    height: 85%;
    border: 1px solid red;
    color: red;
  }
  .loading
  {
    width: 80%;
    height: 10vh;
    position: fixed;
    bottom: 0;
    left: 384px;
  }
  .loading img
  {
    width: 100%;
    height: 100%;
  }
  .home_content_wrapper_col
  {
    width: 700px;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .home_container_row
  {
    /* width: 100%; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .home_isShow
  {
    width: 100%;
  }
  .home_isShow_to
  {
    width: 1005;
    display: none;
  }
  .home_to_container
  {
    width: 100%;
    height: 8rem;
    border: 1px solid black;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .homt_to_img
  {
    width: 20%;
    height: 100%;
  }
  .homt_to_img img
  {
    width: 100%;
    height: 100%;
  }
  @media screen and (max-width:900px) {
    .home_isShow
    {
      display: none;
    }
    .home_isShow_to
    {
      display: block;
    }
  }
</style>
